<template>
  <div class="map-echart">
    <lz-echart :options="options"></lz-echart>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import lzEchart from '@/base-ui/echart'
import { IDataType } from '../types'
import { convertData } from '../utils/convert-data'

const props = defineProps<{
  mapData: IDataType[]
}>()

const options = computed(() => {
  return {
    visualMap: {
      min: 0,
      max: 60000,
      left: 20,
      bottom: 20,
      calculable: true,
      text: ['高', '低'],
      inRange: {
        color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
      },
      textStyle: {
        color: '#fff'
      }
    },
    // 地图坐标组件
    geo: {
      type: 'map',
      map: 'chinaMap', // 使用 registerMap 注册的地图名称
      roam: true, // 是否开启鼠标缩放和平移漫游
      zoom: 1.2,
      top: 35,
      itemStyle: {
        areaColor: 'rgb(19,91,153)',
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return params.data.name + ' : ' + params.value[2]
      }
    },
    series: [
      {
        type: 'scatter', // 散点图
        data: convertData(props.mapData),
        coordinateSystem: 'geo', // 使用地理坐标系
        symbolSize: 10,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      }
    ]
  }
})
</script>

<style scoped>
</style>
